<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>音乐播放</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/play.css">
	</head>
	<body>
		<!-- f1 -->
		<div class="f1">
			<img src="img/back.svg" alt="">
			<span id="musicTitle">御剑江湖(仙剑三主题曲)</span>
		</div>
		<!-- f2 -->
		<div class="f2">
			——<span id="musicAuthor">骆集益</span>——
		</div>
		<!-- f3 -->
		<div class="f3">
			<select>
				<option>标准</option>
				<option>高清</option>
			</select>
			<select>
				<option>封面</option>
				<option>歌词</option>
			</select>
		</div>
		<!-- f4 -->
		<div class="f4">
			<img src="img/0-ShuShan.jpg" alt="" id="musicUrl">
		</div>
		<!-- f5 -->
		<ul class="f5">
			<li><img src="img/heart.svg" id="heart" alt=""></li>
			<li><img src="img/download.svg" alt=""></li>
			<li><img src="img/comment.png" alt=""></li>
			<li><img src="img/share.png" alt=""></li>
			<li><img src="img/more.png" alt=""></li>
		</ul>
		<!-- f6 -->
		<div class="f6">
			<span id="cTime">0:00</span>
			<div>
				<div id="progress"></div>
				<span id="desc"></span>
			</div>
			<span id="dTime">4:15</span>
		</div>
		<!-- f7 -->
		<div class="f7">
			<div>
				<img src="img/sequence.svg" alt="">
			</div>
			<div>
				<img src="img/prev.png" alt="" id="btnPrev">
				<img src="img/play.png" alt="" id="btnPlay">
				<img src="img/next.png" alt="" id="btnNext">
			</div>
			<div>
				<img src="img/list.svg" alt="">
			</div>
		</div>
		<audio src="" id="music"></audio>
		<!-- 引入外部js文件 -->
		<script src="js/play.js"></script>
	</body>
</html>